<template>
    <div class="WarehouseSelector">
        <el-cascader
                :style="{'width' : width}"
                :value="selectArray"
                :placeholder=" isFilter? '全部' : plcText"
                :options="tree"
                :props="{value:'id', label: 'name'}"
                @change="itemChange"
                :change-on-select="isFilter"
        ></el-cascader>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
import Api from "@/assets/api/Api"
import CollectionUtil from "@/util/CollectionUtil"

@Component({
  components: {}
})
export default class WarehouseSelector extends Vue {
  @Prop({
    default: 0
  })
  readonly value!: any
  @Prop({
    default: false
  })
  readonly isFilter!: any
  @Prop({
    default: 1
  })
  readonly level!: any
  @Prop({
    default: true
  })
  readonly visible!: any
  @Prop({
    default: '200px'
  })
  readonly width!: any
  @Prop({
    default() {
      return []
    }

  })
  readonly filterIds!: any
  @Prop({
    default: false
  })
  readonly needFilter!: any
  warehouses: Array<any> = []
  reservoirs: Array<any> = []
  stocks: Array<any> = []
  tree: Array<any> = []
  selectArray: Array<any> = []

  mounted() {
    this.reload()
  }

  reload() {
    this.refreshList()
    this.change(this.isFilter ? 0 : null)
  }

  change(v) {
    this.$emit('input', v)
  }

  refreshList() {
    this.$ajax.request(Api.warehouse.warSelectAll).then(resp => {
      this.warehouses = resp

      if (this.level > 1) {
        return this.$ajax.request(Api.warehouse.resSelectAll)
      }
    }).then(resp => {
      this.reservoirs = resp

      if (this.level > 2) {
        return this.$ajax.request(Api.warehouse.stockSelectAll)
      }
    }).then(resp => {
      this.stocks = resp
    }).finally(() => this.createTree())
  }

  createTree() {
    this.tree = CollectionUtil.listToTreeByTwoList(this.warehouses, CollectionUtil.listToTreeByTwoList(this.reservoirs, this.stocks, 'reservoirId'), 'warehouseId')

    if (this.isFilter) {
      this.tree = [{
        id: 0,
        name: '全部'
      }].concat(this.tree)
    } else if (this.needFilter || this.filterIds.length) {
      this.tree = CollectionUtil.filterTree(this.tree, x => this.filterIds.includes(x.id), 'children', 3)
    }

    this.refreshSelect()
  }

  refreshSelect() {
    this.selectArray = CollectionUtil.getTreeRoute(this.tree, x => x.id === this.value, 'id', 'children', this.level)
  }

  itemChange(nodes) {
    if (!this.isFilter && nodes.length < this.level) return
    this.$emit('input', nodes.length !== this.level ? 0 : nodes[nodes.length - 1])
    this.$emit('change', nodes)
  }

  @Watch('visible')
  onVisibleChanged(v) {
    if (v) {
      this.refreshList()
    }
  }

  @Watch('value')
  onValueChanged() {
    this.refreshSelect()
  }

  @Watch('filterIds')
  onFilterIdsChanged() {
    this.createTree()
  }

  get valueUse() {
    if (this.value) {
      return this.value
    }

    return this.isFilter ? 0 : null
  }

  get plcText() {
    return '请选择' + ['仓库', '仓位', '货架'][this.level - 1]
  }

}
</script>

<style lang="less" scoped>
    @import (reference) "~style/all.less";

    .WarehouseSelector {
    }
</style>